
<ui:composition template="../template/plantilla_01.xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core">

    <ui:define name="head">
        <h:outputStylesheet library="css" name="css_boxes.css"/>
        <h:outputStylesheet library="css" name="css_header.css"/>

        <!--Load the AJAX API-->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["map"]});
      google.setOnLoadCallback(drawMap);
      function drawMap() {
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Lat');
        data.addColumn('number', 'Lon');
        data.addColumn('string', 'Name');
        data.addRows(5);

        data.setCell(0, 0, -27.456221531494087);
        data.setCell(0, 1, -58.99408757686615);
        data.setCell(0, 2, 'RESISTENCIA (Chaco, Corrientes, Formosa, Misiones, Santa Fe Norte)');

        data.setCell(1, 0, -26.818179993869215);
        data.setCell(1, 1, -65.21757155656814);
        data.setCell(1, 2, 'TUCUMAN (Tucuman, Santiago del Estero, Salta, Jujuy, Catamarca, La Rioja)');

        data.setCell(2, 0, -32.89961687971874);
        data.setCell(2, 1, -68.83070826530456);
        data.setCell(2, 2, 'MENDOZA (Mendoza,San Juan,San Luis)');
        data.setCell(3, 0, -34.69305618669921);
        data.setCell(3, 1, -58.3908212184906);
        data.setCell(3, 2, 'BUENOS AIRES (Bueno Aires, Santa Fe Centro, Santa Fe Sur, Cordoba, La Pampa, Patagonia)');
        data.setCell(4, 0, -29.145180541549756);
        data.setCell(4, 1, -59.64603066444397);
        data.setCell(4, 2, 'HEADQUARTERS (Equipo Comercial y Administrativo Central)');

        var map = new google.visualization.Map(document.getElementById('map_div'));
        map.draw(data, {showTip: true,mapType: 'normal',useMapTypeControl:true });
      }
    </script>


    </ui:define>
    
    <ui:define name="panelCentral">

        <h:form id="formulario">            
            <p:panel header="Almacenes" style="min-height: 400px;" >

                <h:panelGrid columns="2" columnClasses="colTop,colTop" cellspacing="5" >

                    <ui:include src="../global/datosSucursales.xhtml" />

                    <h:panelGroup>
                        <!--Div that will hold the pie chart-->
                        <div id="map_div" style="width:580px;height:350px;border:1px #999999" ></div>

                    </h:panelGroup>

                </h:panelGrid>
        
            </p:panel>
            
        </h:form>

    </ui:define>
    
</ui:composition>

